<template>
  <open-modal :openModal='showColumnList' @closeModal='hideColumnList'>
    <div class="c-bg-white c-pt40 c-br-tl20 c-br-tr20 c-p">
      <div class="c-fc-xblack c-fs28 c-fw-b c-w100 c-pa c-p-t32 c-p-l0 c-textAlign-c">专栏目录</div>
      <div class="c-ph24 c-flex-row c-justify-sb c-aligni-center c-pb10 c-p c-pz10">
        <div class="c-flex-row c-aligni-center c-fs22 c-fc-xblack" @click="goColumn()">
          <div class="iconfont c-fs16 c-mr12">&#xe600;</div>返回专栏
        </div>
        <div class="c-flex-row c-aligni-center0" @click="sortChange(sort)">
          <i class="iconfont c-fs22 c-mr10 c-fc-xblack" :class="sort == 'asc' ? 'c-rotate180' : ''" v-html="sort == 'asc' ? '&#xe8c8;' : '&#xe8c8;'"></i>
        </div>
      </div>
      <div id="courseList" class="c-pb32 c-maxh600 c-contexty-auto c-ph24">
        <div v-if="!columnPermission" class="c-m-0auto c-pb160 c-textAlign-c c-pt140">
          <img class="c-ww210 c-mb30 c-m-0auto" :src="require('@/assets/i/wap/course/noColumnPermission.png')"/>
          <div class="c-fw-b c-fs26 c-fc-xblack c-mb40">暂无权限，购买后查看专栏目录</div>
          <div class="c-fw-b c-fs26 c-fc-white c-bg-FF5D3D c-br32 c-hh64 c-lh64 c-ww360 c-m-0auto" @click="goColumn()">前往购买</div>
        </div>
        <div v-else>
          <div class="c-pv32" :class="index == columnCourseList.length - 1 ? '' : 'c-bd-b1-f6'" v-for="(item, index) in columnCourseList" :key="index">
            <div class="c-flex-row c-aligni-center c-justify-sb" @click="changeAssetsShow(index)" :id="index">
              <div class="c-fs24 c-text-ellipsis1 c-maxw520" @click.stop="goColumnCourse(item, index)" :class="item.courseType == dataInfo.courseType && item.courseId == courseId ? 'theme-fc c-fw-b' : 'c-fc-xblack'"><span class="c-fc-gray c-fs20 c-mr8 c-bd1 c-pv4 c-ph10 c-br16 c-fw-n">{{prodTypes[item.prodType]}}</span>{{item.name}}</div>
              <div class="iconfont c-fs20 c-fc-gray c-pv10 c-pl40 c-pr10" v-if="(item.courseType == 0 || item.courseType == 1) && item.assets && item.assets.items && item.assets.items.length > 0" v-html="!item.show ? '&#xe6a9;' : '&#xe6ab;'"></div>
            </div>
            <div class="c-bg-white" v-if="(item.courseType == 0 || item.courseType == 1) && item.assets && item.assets.items && item.show">
              <div v-for="(sItem,sIndex) in item.assets.items" :key="sIndex">
                <div v-if="sItem.chapterId && sItem.chapterSort == 1" class="c-p c-pl40 c-pr20 c-pt32">
                  <div class="c-flex-row c-aligni-center">
                    <div class="c-w0 c-flex-grow1 c-fs26 c-fc-xblack c-fw600 c-text-ellipsis2">{{ sItem.parentName }}(共{{ sItem.cnt }}节)</div>
                    <div @click="hideChaptList(sItem, sIndex, index)" class="c-pl32 iconfont c-fs24 c-fc-gray">{{ sItem.showStatus == 'hide' ? '&#xfbcd;' : '&#xe67a;'}}</div>
                  </div>
                </div>
                <div v-show="sItem.showStatus != 'hide'" @click.stop="clickClassItem(index, sIndex)" :id="index + '|' + sIndex" class="c-flex-row c-aligni-center c-mt40 c-p c-pl48 c-fs22 c-lh40" :class="item.courseType == dataInfo.courseType && item.courseId == courseId && (learningPosition == sIndex || currentIndex == sIndex) ? 'theme-fc c-fw-b' : 'c-fc-xblack'">
                  <div v-if="item.courseType == dataInfo.courseType && item.courseId == courseId && (learningPosition == sIndex || currentIndex == sIndex)" :class="playStatus == 1 ? '' : 'stop-animation'" class="line-scale-pulse-out2 c-flex-row c-p c-mr10">
                    <div class="theme-bg"></div>
                    <div class="theme-bg"></div>
                    <div class="theme-bg"></div>
                    <div class="theme-bg"></div>
                  </div>
                  <div v-else class="iconfont c-fs22 c-fc-xblack c-mr10" v-html="item.courseType == 0 ? '&#xe6cf;' : '&#xe6ce;'"></div>
                  <div class="c-text-ellipsis1 c-fs22 c-lh40"><span class="c-vcAlign-middle">{{item.courseType == 0 ? sItem.videoName : sItem.audioName}}</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-fs18 c-fc-sblack c-textAlign-c c-pv20" @click="getMoreCourse" v-if="columnIsPage && !isLoading">加载更多&nbsp;></div>
          <div class="c-fs18 c-fc-sblack c-textAlign-c c-pv20" v-if="!columnIsPage && !isLoading && columnCourseList.length > 0">我是有底线的</div>
          <loading-status-tem :noData="!isLoading && columnCourseList.length <= 0" :noDataText="'暂无相关课程'" :showLoading="isLoading"></loading-status-tem>
        </div>
      </div>
      <div class="c-ph24 c-pv12">
        <div class="c-bd1-ccc c-hh64 c-lh64 c-w100 c-br32 c-textAlign-c c-fs26" @click="hideColumnList">关闭</div>
      </div>
    </div>
  </open-modal>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "RelateColumnList",
  components: {
    OpenModal,
    loadingStatusTem
  },
  data() {
    return {
      isLoading: false,
      columnCoursePage: 1,
      columnIsPage: false,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      sort: 'desc', // 专栏列表倒序
      columnCourseList: [],
      prodTypes: global.prodMapType,
      isChangeSort: false, // 是否切换排序
    };
  },
  props: {
    isInitData: {
      type: Boolean,
      default: false
    },
    columnPermission: {
      type: Boolean,
      default: false
    },
    showColumnList: {
      type: Boolean,
      default: false
    },
    dataInfo: {
      type: Object,
      default: () => {}
    },
    courseId: {
      type: String,
      default: ''
    },
    extColumnId: {
      type: String,
      default: ''
    },
    distributionId: {
      type: String,
      default: ''
    },
    columnCourseIndex: {
      type: Number,
      default: 0
    },
    learningPosition: {
      type: Object,
      default: null
    },
    currentIndex: {
      type: Number,
      default: 0
    },
    playStatus: {
      type: Number,
      default: 0
    }
  },
  watch: {
    isInitData() {
      if (this.isInitData) {
        this.initData();
        this.getMoreCourse();
        this.$nextTick(() => {
          setTimeout(() => {
            document.getElementById("courseList").scrollTop = 0
          }, 200)
        })
      }
    }
  },
  methods: {
    hideChaptList(item, sIndex, index) {
      if (item.showStatus != 'hide') {
        for (let i = 0; i < item.cnt; i++) {
          if (this.columnCourseList[index].assets.items[sIndex] && this.columnCourseList[index].assets.items[sIndex].chapterId == item.chapterId) {
            this.$set(this.columnCourseList[index].assets.items[sIndex + i], "showStatus", 'hide');
          }
        }
      } else {
        for (let i = 0; i < item.cnt; i++) {
          if (this.columnCourseList[index].assets.items[sIndex] && this.columnCourseList[index].assets.items[sIndex].chapterId == item.chapterId) {
            this.$set(this.columnCourseList[index].assets.items[sIndex + i], "showStatus", 'show');
          }
        }
      }
    },
    initData() {
      this.isLoading = false;
      this.columnCoursePage = 1;
      this.columnIsPage = false;
      this.columnCourseList = [];
      this.sort = this.cfg.enableColumnOrderType == 1 ? 'asc' : 'desc';
      this.isChangeSort = this.sort == this.isChangeSort ? true : false;
    },
    changeAssetsShow(index) {
      this.$set(this.columnCourseList[index], 'show', !this.columnCourseList[index].show);
    },
    hideColumnList() {
      this.showColumnList = false;
      this.$emit('hideColumnList')
    },
    sortChange(sort) {
      if (!this.columnPermission) {
        return
      }
      this.sort = sort == 'asc' ? 'desc' : 'asc';
      this.columnCourseList = [];
      this.columnCoursePage = 1;
      this.columnIsPage = false;
      this.getMoreCourse();
    },
    popColumnList() {
      // 来源是专栏且没有课程权限
      if (!this.columnPermission) {
        this.showColumnList = true;
        return
      }
      this.showColumnList = true;
      this.showSearchColumn = false;
      this.sort = this.cfg.enableColumnOrderType == 2 ? 'asc' : 'desc';
      if (this.columnCoursePage == 1 && this.columnCourseList.length == 0) {
        this.getMoreCourse();
      }
    },
    //记录专栏要跳转播放的节数
    setCourseProgress(index, sIndex) {
      let data = {
        prodId: this.extColumnId,
        prodType: 9,
        cType: 1,
        page: Math.floor(index / 10) + 1,
        outIndex: index % 10,
        innerIndex: sIndex
      };
      let postUrl = `${global.apiurl}analysis/course/positionLog`;
      utilJs.postMethod(postUrl, data, res => {
      });
    },
    getMoreCourse() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let columnPermission = this.columnPermission ? 1 : 0;
      let limits = 10;
      if (this.dataInfo.hasPermission) {
        limits = this.sort == 'desc' ? (Math.ceil(this.dataInfo.hasCourses / 10) * 10) : this.columnCoursePage == 1 ? Math.ceil((this.columnCourseIndex + 1) / 10) * 10 : 10;
      }
      let postUrl = `${global.apiurl}column/getCourses/${this.extColumnId}?page=${this.columnCoursePage}&limit=${limits}&sort=${this.sort}&name=&isCoursePage=0&columnPermission=${columnPermission}&isDirAll=1&columnDetailPage=-1`;
      if (this.distributionId) {
        postUrl = `${global.apiurl}distributionMarkets/${this.extColumnId}/subs?page=${this.columnCoursePage}&limit=${limits}&sort=${this.sort}&isCoursePage=0&columnPermission=${columnPermission}`;
      }
      utilJs.getMethod(postUrl, (res) => {
        this.isLoading = false;
        let list = res.data;
        list.forEach((item, index) => {
          if (item.courseType == this.dataInfo.courseType && item.courseId == this.courseId) {
            item.show = true;
          } else {
            item.show = false;
          }
        })
        if (this.columnCoursePage == 1) {
          this.courseCount = res.total;
          this.columnCourseList = res.data;
        } else {
          let list = res.data;
          this.columnCourseList = this.columnCourseList.concat(list);
        }
        if (this.columnCoursePage == 1) {
          this.$nextTick(() => {
            let id = this.columnCourseIndex + '|' + this.learningPosition;
            let id1 = this.columnCourseIndex
            let offsetTop = 0;
            if (this.learningPosition == 0) {
              offsetTop = document.getElementById(id1) && document.getElementById(id1).offsetTop ? document.getElementById(id1).offsetTop : 0;
            } else {
              offsetTop = document.getElementById(id) && document.getElementById(id).offsetTop ? document.getElementById(id).offsetTop : 0;
            }
            setTimeout(() => {
              document.getElementById('courseList').scrollTop = offsetTop - 80
            }, 200);
          })
        }
        this.columnCoursePage = this.columnCourseList.length < this.dataInfo.hasCourses ? Math.floor(this.columnCourseList.length / 10) + 1 : this.columnCoursePage; //res.data && (res.data.length >= 10) ? this.columnCoursePage + 1 : this.columnCoursePage;
        this.columnIsPage = this.columnCourseList.length < this.dataInfo.hasCourses ? true : false; //res.data && (res.data.length >= 10) ? true : false;
      }, failRes => {
        this.isLoading = false;
      });
    },
    // 跳转到所属专栏
    goColumn() {
      let queryT = { cId: -1, ckFrom: global.ckFrom.column, extId: this.extColumnId, distribution: this.distributionId, fromBackColumn: true }
      if (this.learningPosition || this.learningPosition == 0) {
        queryT.classIndex = this.learningPosition;
      }
      queryT.columnCourseIndex = this.columnCourseIndex;
      this.$routerGo(this, "push", {
        path: "/homePage/column/columnDetail",
        query: queryT
      });
    },
    goColumnCourse(item, index) {
      console.log(1111);
      let data = {
        courseId: item.prodId,
        courseType: item.courseType != null ? item.courseType : item.prodType,
        datumId: item.datumId || item.prodId,
        liveId: item.liveId || item.prodId
      }
      this.$emit('goColumnCourse', data, index)
      this.setCourseProgress(index, 0)
    },
    clickClassItem(index, sIndex) {
      let item = this.columnCourseList[index];
      this.$emit('clickClassItem', {item: item, index: index, sIndex: sIndex});
      this.setCourseProgress(index, sIndex)
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .modal {
  z-index: 10000 !important;
}
.stop-animation > div {
  animation-play-state:paused!important;
  -webkit-animation-play-state:paused!important; /* Safari 和 Chrome */
}
.line-scale-pulse-out2 > div {
  height: 0.5rem;
  margin: 0 0.5px;
  width: 2px;
  border-radius: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.line-scale-pulse-out2 > div:nth-child(2),
.line-scale-pulse-out2 > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
  animation-delay: -0.4s !important;
}
@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
</style>

